<template>
  <div class="select_down_box" @click.stop="closedAll">
    <div class="select_down_left">
      <div
        class="select_down_left_id"
        :class="{ 'icon allDevice': props.value.one === 'icon allDevice' }"
      >
        {{ props.value.one === 'icon allDevice' ? '' : props.value.one }}
      </div>
      <div
        class="select_down_left_box"
        :class="{ _allDevice: props.value.one === 'icon allDevice' }"
        @click.stop="clickLeft"
      >
        <div class="select_down_left_box_top">
          <div
            class="select_down_left_box_text"
            :class="{ _maxWidth: props.value.one === 'icon allDevice' && switchObj.left_switch }"
          >
            {{ pull_down_text.left_pull_down_text || props.option_list_1[0]?.value }}
          </div>
          <text class="icon jiantou"></text>
        </div>
        <div class="select_down_left_box_item" v-if="switchObj.left_switch">
          <div
            class="left_item"
            @click.stop="edit_check(item, 'left')"
            v-for="item in props.option_list_1"
            :key="item.value"
          >
            <view :class="item.value.includes('全部') ? 'all_centered' : ''">
              {{ item.value }}</view
            >
            <view class="_name" v-if="item.text && !item.text.includes('全部')">
              {{ item.text }}</view
            >
          </div>
        </div>
      </div>
    </div>
    <div class="select_down_right" v-if="props.select_down">
      <div class="select_down_right_id">{{ props.value.two }}</div>
      <div class="select_down_right_box" @click.stop="clickRight">
        <div class="select_down_right_box_top">
          <div class="select_down_right_box_text">
            {{ pull_down_text.right_pull_down_text || props.option_list_2[0]?.text }}
          </div>
          <text class="icon jiantou"></text>
        </div>
        <div class="select_down_right_box_item" v-show="switchObj.right_switch">
          <div
            class="_item"
            @click.stop="edit_check(item, 'right')"
            v-for="item in props.option_list_2"
            :key="item.value"
          >
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, onBeforeUnmount } from 'vue'

const props = defineProps({
  select_down: {
    type: Boolean,
    default: true,
  },
  value: {
    type: Object,
  },
  option_list_1: {
    type: Array,
  },
  option_list_2: {
    type: Array,
  },
  skipMachineId: {
    type: String,
  },
})
const pull_down_text = ref({
  left_pull_down_text: '',
  right_pull_down_text: '',
})
/** 下拉开关 */
const switchObj = ref({
  left_switch: false,
  right_switch: false,
})
/**点击过滤报警列表 */
const edit_check = (ev, type) => {
  if (type === 'left') {
    pull_down_text.value.left_pull_down_text =
      props.value.one === 'icon allDevice' ? ev.text : ev.value
    const item = { ...ev }
    if (item.value.includes('全部')) {
      item.value = ''
    }
    console.log(item)
    emit('leftSelectId', item)
    switchObj.value.left_switch = !switchObj.value.left_switch
  } else {
    pull_down_text.value.right_pull_down_text = ev.text
    emit('rightSelectId', ev)
    switchObj.value.right_switch = !switchObj.value.right_switch
  }
}

const emit = defineEmits(['leftSelectId', 'rightSelectId'])

watch(
  () => [props.skipMachineId, props.option_list_1.length],
  (newVal) => {
    if (newVal[0] && newVal[1]) {
      props.option_list_1.forEach((item) => {
        if (item.value === newVal[0]) {
          pull_down_text.value.left_pull_down_text = item.text
        }
      })
    }
  },
)
const componentRef = ref(null)
const handleClickOutside = (event) => {
  // 如果点击的目标不是组件的一部分，则执行相应操作
  if (!componentRef.value || !componentRef.value.contains(event.target)) {
    console.log('点击了其他地方')
    switchObj.value.left_switch = false
    switchObj.value.right_switch = false
  }
}
const closedAll = () => {
  switchObj.value.left_switch = false
  switchObj.value.right_switch = false
}

const clickLeft = () => {
  if (props.option_list_1?.length <= 0) return
  switchObj.value.right_switch = false
  switchObj.value.left_switch = !switchObj.value.left_switch
}
const clickRight = () => {
  if (props.option_list_2?.length <= 0) return
  switchObj.value.left_switch = false
  switchObj.value.right_switch = !switchObj.value.right_switch
}
onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style lang="scss" scoped>
.select_down_box {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px 0 5px;
  background-color: #fff;
  .select_down_left {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
    .select_down_left_id {
      color: var(--c0);
      font-size: var(--fs12);
      margin-right: 98px;
    }
    .allDevice {
      font-size: 22px;
      color: #11c58f;
    }
    .select_down_left_box {
      position: absolute;
      left: 58px;
      top: -4px;
      .select_down_left_box_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 6px;
        width: 86px;
        height: 27px;
        line-height: 27px;
        border: 1px solid #8ce9cc;
        border-radius: 4px;
        background: #f4fffc;
        font-size: var(--fs12);
        .select_down_left_box_text {
          width: 66px;
          font-size: var(--fs12);
          color: #00904b;
          margin-right: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        ._maxWidth {
          max-width: 210px;
        }
        .icon {
          font-size: var(--fs12);
          color: #009065;
        }
      }
      .select_down_left_box_item {
        max-width: 164px;
        max-height: 202px;
        overflow-y: auto;
        z-index: 999;
        margin-top: 5px;
        text-align: center;
        border: 1px solid #8ce9cc;
        border-radius: 4px;
        background: #f4fffc;
        font-size: var(--fs12);
      }
    }
    ._allDevice {
      left: 28px;
      top: 0px;
    }
  }
  .select_down_right {
    position: relative;
    display: flex;
    align-items: center;
    .select_down_right_id {
      color: var(--c0);
      font-size: var(--fs12);
      margin-right: 98px;
    }
    .select_down_right_box {
      position: absolute;
      right: 0;
      top: -4px;
      width: 86px;
      .select_down_right_box_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 6px;
        height: 27px;
        line-height: 27px;
        font-size: var(--fs12);
        border: 1px solid #8ce9cc;
        border-radius: 4px;
        background: #f4fffc;
        .select_down_right_box_text {
          font-size: var(--fs12);
          color: #00904b;
        }
        .icon {
          font-size: var(--fs12);
          color: #009065;
        }
      }
      .select_down_right_box_item {
        max-height: 152px;
        overflow-y: auto;
        z-index: 999;
        margin-top: 5px;
        text-align: center;
        border: 1px solid #8ce9cc;
        border-radius: 4px;
        background: #f4fffc;
      }
    }
  }
}
._item {
  color: #00904b;
  height: 30px;
  line-height: 30px;
  font-size: var(--fs12);
  ._name {
    color: #666;
    font-size: var(--fs10);
  }
}
.left_item {
  color: #00904b;
  width: 160px;
  height: 40px;
  text-align: left;
  font-size: var(--fs12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 14px;
  ._name {
    color: #666;
    font-size: var(--fs10);
  }
  .all_centered {
    height: 40px;
    line-height: 40px;
  }
}
</style>
